<template>
  <div>
     
     <!-- 图文列表区域 -->

  <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
					<router-link :to="'/home/newsinfo/'+item.id">
						<img class="mui-media-object mui-pull-left" :src="item.img_url">
						<div class="mui-media-body">
							<h1>{{item.title}}</h1>
							<p class='mui-ellipsis'>
                                <span>发表时间:{{item.add_time |dateFormat}}</span>
                                <span>点击：{{item.click}}</span>
                            </p>
						</div>
					</router-link>
				</li>			
			</ul>

  </div>
</template>


<script>
import {Toast} from 'mint-ui'
    export default{
        data(){
            return{
                newslist:[   //保存所有新闻列表的数组

                ],
            };
        },
        created(){
           this.getNewsList();
        },
        methods:{
            //获取新闻列表
            getNewsList(){
                this.$http.get('api/getnewslist').then(result=>{
                    if(result.body.status===0){
                    //挂载数据
                    this.newslist=result.body.message;
                    }else{
                     //提示用户失败了
                     //注意：这里的Toast是一个js组件，只能通过js调用的方式来使用，并不是
                     //把它当作标签引入到页面中去的，所以，如果想要在组件中调用Toast，则必须在
                     //自己的组件中导入，否则，在子组件中，是访问不到Toast 这个js对象的
                    Toast('获取新闻列表失败')
                    }
                })

            }
        }
    }
</script>


<style lang="scss" scoped>
   .mui-media-body{
       h1{
           font-size: 14px
       }
       .mui-ellipsis{
           color: #26A2ff;
           font-size: 12pxl;
           display: flex;
           justify-content: space-between;
       }
   }
</style>

